<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Themes by Themes.guide</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
    <link rel="stylesheet" href="./css/styles.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="http://themes.guide/favicon.ico" type="image/x-icon" />
    <meta property="og:image" name="twitter:image" content="http://bootstrap.themes.guide/assets/themesguide.gif">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@ThemesGuide">
    <meta name="twitter:creator" content="@ThemesGuide">
    <meta name="twitter:title" content="Bootstrap 4 Themes and Templates">
    <meta name="twitter:description" content="Download free, open source Bootstrap 4 themes and templates by Themes.guide.">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-103606808-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-103606808-1');
    </script>

  </head>
  <body id="page-top" data-spy="scroll" data-target=".fixed-top" data-offset="60">
    <nav class="navbar navbar-custom navbar-dark fixed-top navbar-expand-md" role="navigation">
    <div class="container">
        <a class="navbar-text page-scroll font-weight-bold text-uppercase py-3" href="http://themes.guide">
        <span>Themes.guide</span>
        </a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-md-auto">
                <li class="nav-item"><a class="page-scroll active nav-link pr-3" href="./">Bootstrap 4</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-3" target="_ext" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-3" title="Bootstrap 4 themes collection" href="http://themes.guide/#freebies">Free Themes</a></li>
                <li class="nav-item"><a class="page-scroll nav-link pr-0" href="http://themes.guide/#themes">Pro Themes</a></li>
            </ul>
        </div>
    </div>
</nav> 
    <section class="bg-primary text-white">
        <div class="container py-5">
            <div class="row my-3 text-center text-lg-left align-items-center">
                <div class="col-xl-auto col-lg-6">
                    <h1 class="display-3 mb-0">Bootstrap 4</h1>
                    <h5 class="text-uppercase">Themes.guide</h5>
                    <p class="mt-5 mx-auto">
                        <a class="github-button" href="https://github.com/themesguide/bootstrap-themes" data-size="large" aria-label="Follow @themesguide on GitHub">Follow</a>
                        <a class="github-button" href="https://github.com/themesguide/bootstrap-themes" data-size="large" data-icon="octicon-star" aria-label="Star themesguide/bootstrap-themes on GitHub">Star</a><br>
                    </p>
                    <h1 class="h6">Free, Open Source Themes for <a class="text-white" href="http://getbootstrap.com">Bootstrap 4.3.1</a> + "How-to..."</h1>
                </div>
                <div class="col-xl-auto col-lg mr-auto">
                    <svg class="i-download d-lg-none d-inline" title="For your downloading pleasure" viewBox="0 0 32 32" width="240" height="240" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5">
                        <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
                    </svg>
                </div>
            </div>
        </div>
    </section>
    <div class="bg-white">
        <div class="container py-5">
            <div class="row py-4">
                <div class="col-12 my-auto">
                    <div class="row text-center">
                        <div class="col-lg-4 mb-4">
                            <div class="card h-100 border-0 shadow">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                    <h1 class="display-2"><a class="text-primary" href="how-to.html"><span class="ion ion-ios-bookmarks-outline"></span></a></h1>
                                    <h4 class="card-title"><a class="text-primary" href="how-to.html">How-to</a></h4>
                                    <p class="card-text">
                                        Mystified? You're looking for our <strong>"<a class="text-primary" href="how-to.html">How to Bootstrap</a>"</strong> guide. This
                                        essential guide explains <em>everything</em> from Getting Started &amp; the Grid, to Components, 
                                        <a href="how-to-customize-bootstrap.html" class="text-primary">Customizing</a> &amp; <a href="how-to-create-bootstrap-themes.html" class="text-primary">Theming</a> Bootstrap. 
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <div class="card h-100 border-0 shadow">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                    <h1 class="display-2"><a class="text-primary" href="#themes"><span class="ion ion-ios-color-palette-outline"></span></a></h1>
                                    <h4 class="card-title"><a class="text-primary" href="#themes">Free Themes</a></h4>
                                    <p class="card-text">
                                        Don't want that typical Bootstrap look? Our <a class="text-primary" href="#themes">free themes</a> 
                                        provide an additional lightweight style-layer
                                        to give your standard Bootstrap 4 site a <strong>unique, custom look-and-feel</strong>.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <div class="card h-100 border-0 shadow">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                    <h1 class="display-2"><a class="text-primary" href="http://themes.guide#about"><span class="ion ion-ios-construct-outline"></span></a></h1>
                                    <h4 class="card-title"><a class="text-primary" href="http://themes.guide#about">Ready-to-use</a></h4>
                                    <p class="card-text">Just like Bootstrap, each <a class="text-primary" href="#themes">theme</a> is crafted with care for design and performance. All built on modern HTML5 &amp; CSS3 
                                    standards to ensure consistency and <strong>cross-browser</strong> support.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="bg-light" id="themes">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 py-3">
                    <h1 class="display-3 mb-0">Themes</h1>
                    <p class="lead text-justify">
                        A collection of free, <a href="https://github.com/ThemesGuide/bootstrap-themes" target="_new">open-source</a> themes to give your Bootstrap 4 projects a 
                        <strong>unique, custom</strong> style. Simply download the <code>theme.css</code> file for any theme, and include it after the standard 
                        <code>bootstrap.css</code> in your project's HTML templates. Each theme also includes 
                        example layout templates to demonstrate Bootstrap 4 elements, components, and content integration.
                    </p>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-left">
                    <a href="./signal"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_signal.png" alt="Screenshot Signal"></a>
                </div>
                <div class="col-md-7 py-2 ">
                    <h2 class="my-1"><a href="./signal">Signal</a></h2>
                    <p>
                        Like sailing yacht flags in a busy harbor.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Comfortaa'">Comfortaa</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#FF304F;" title="#FF304F">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#CACACA;" title="#CACACA">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#015668;" title="#015668">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#06648C;" title="#06648C">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#0F81C7;" title="#0F81C7">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#0DE2EA;" title="#0DE2EA">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#ececec;" title="#ececec">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#222222;" title="#222222">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-right">
                    <a href="./greyson"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_greyson.png" alt="Screenshot Greyson"></a>
                </div>
                <div class="col-md-7 py-2 order-md-first text-md-right">
                    <h2 class="my-1"><a href="./greyson">Greyson</a></h2>
                    <p>
                        Square corners with shades of gray and sea green.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Oswald'">Oswald</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#2f3c48;" title="#2f3c48">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#6f7f8c;" title="#6f7f8c">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#3e4d59;" title="#3e4d59">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#cc330d;" title="#cc330d">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#5c8f94;" title="#5c8f94">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#6e9fa5;" title="#6e9fa5">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eceeec;" title="#eceeec">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#1e2b37;" title="#1e2b37">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-left">
                    <a href="./fresca"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_fresca.png" alt="Screenshot Fresca"></a>
                </div>
                <div class="col-md-7 py-2 ">
                    <h2 class="my-1"><a href="./fresca">Fresca</a></h2>
                    <p>
                        Like a sunny summer day in Northern Italy.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Muli'">Muli</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#07689F;" title="#07689F">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#C9D6DF;" title="#C9D6DF">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#11D3BC;" title="#11D3BC">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#F67280;" title="#F67280">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#A2D5F2;" title="#A2D5F2">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FF7E67;" title="#FF7E67">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FAFAFA;" title="#FAFAFA">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#4e4e4e;" title="#4e4e4e">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-right">
                    <a href="./darkster"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_darkster.png" alt="Screenshot Darkster"></a>
                </div>
                <div class="col-md-7 py-2 order-md-first text-md-right">
                    <h2 class="my-1"><a href="./darkster">Darkster</a></h2>
                    <p>
                        A dark background theme with bold contrasting colors.<br>
                        Also includes high-res image from Unsplash.
                    </p>
                    <p><span class="h5" style="font-family:'Comfortaa'">Comfortaa</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#FF550B;" title="#FF550B">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#303030;" title="#303030">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#015668;" title="#015668">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FF304F;" title="#FF304F">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#0F81C7;" title="#0F81C7">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#0DE2EA;" title="#0DE2EA">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#e8e8e8;" title="#e8e8e8">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#000000;" title="#000000">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-left">
                    <a href="./hello_kiddie"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_hello_kiddie.png" alt="Screenshot Hello Kiddie"></a>
                </div>
                <div class="col-md-7 py-2 ">
                    <h2 class="my-1"><a href="./hello_kiddie">Hello Kiddie</a></h2>
                    <p>
                        Like a precocious child that doesn't go away.<br>
                        Also includes high-res image from Unsplash.
                    </p>
                    <p><span class="h5" style="font-family:'Raleway'">Raleway</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#f6648C;" title="#f6648C">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#CACACA;" title="#CACACA">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#035668;" title="#035668">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FF444F;" title="#FF444F">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#3F81C7;" title="#3F81C7">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#0DE2EA;" title="#0DE2EA">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eAeAeA;" title="#eAeAeA">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#223322;" title="#223322">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-right">
                    <a href="./blue_voltage"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_blue_voltage.png" alt="Screenshot Blue Voltage"></a>
                </div>
                <div class="col-md-7 py-2 order-md-first text-md-right">
                    <h2 class="my-1"><a href="./blue_voltage">Blue Voltage</a></h2>
                    <p>
                        The intense, saturated blue theme with rounded buttons.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Nunito'">Nunito</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#1633ff;" title="#1633ff">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#a0b7bc;" title="#a0b7bc">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#1633ff;" title="#1633ff">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#00f900;" title="#00f900">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#7ebcfa;" title="#7ebcfa">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#00f900;" title="#00f900">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eef0f2;" title="#eef0f2">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#000633;" title="#000633">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-left">
                    <a href="./hootstrap"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_hootstrap.png" alt="Screenshot Hootstrap"></a>
                </div>
                <div class="col-md-7 py-2 ">
                    <h2 class="my-1"><a href="./hootstrap">Hootstrap</a></h2>
                    <p>
                        It's a hootin, hollarin ho-down y'all!<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Autour One'">Autour One</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#528078;" title="#528078">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eed75a;" title="#eed75a">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FEC100;" title="#FEC100">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#703B3B;" title="#703B3B">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#63e792;" title="#63e792">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FFE869;" title="#FFE869">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FDFBF7;" title="#FDFBF7">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#555555;" title="#555555">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-right">
                    <a href="./herbie"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_herbie.png" alt="Screenshot Herbie"></a>
                </div>
                <div class="col-md-7 py-2 order-md-first text-md-right">
                    <h2 class="my-1"><a href="./herbie">Herbie</a></h2>
                    <p>
                        Unique and stylish with a readable font.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Crete Round'">Crete Round</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#083358;" title="#083358">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#F67280;" title="#F67280">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#0074E4;" title="#0074E4">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FF4057;" title="#FF4057">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#74DBEF;" title="#74DBEF">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FC3C3C;" title="#FC3C3C">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#F2F2F0;" title="#F2F2F0">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#072247;" title="#072247">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-left">
                    <a href="./boldstrap"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_boldstrap.png" alt="Screenshot Boldstrap"></a>
                </div>
                <div class="col-md-7 py-2 ">
                    <h2 class="my-1"><a href="./boldstrap">Boldstrap</a></h2>
                    <p>
                        A big, blue sky and no clouds in sight.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Yantramanav'">Yantramanav</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#27a2fc;" title="#27a2fc">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#a0b7bc;" title="#a0b7bc">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#37bd74;" title="#37bd74">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#e8286b;" title="#e8286b">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#7ebcfa;" title="#7ebcfa">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#ff9b37;" title="#ff9b37">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eef0f2;" title="#eef0f2">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#3c4055;" title="#3c4055">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-right">
                    <a href="./lovey"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_lovey.png" alt="Screenshot Lovey"></a>
                </div>
                <div class="col-md-7 py-2 order-md-first text-md-right">
                    <h2 class="my-1"><a href="./lovey">Lovey</a></h2>
                    <p>
                        A bright, hot pink theme in good taste.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Lato'">Lato</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#D80E70;" title="#D80E70">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#dddddd;" title="#dddddd">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#4EF037;" title="#4EF037">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#FA4659;" title="#FA4659">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#00BBF0;" title="#00BBF0">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#f4f133;" title="#f4f133">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eeeeee;" title="#eeeeee">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#353535;" title="#353535">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-left">
                    <a href="./bootstrap_purple"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_bootstrap_purple.png" alt="Screenshot Bootstrap Purple"></a>
                </div>
                <div class="col-md-7 py-2 ">
                    <h2 class="my-1"><a href="./bootstrap_purple">Bootstrap Purple</a></h2>
                    <p>
                        Primarily purple like the Bootstrap docs.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Arial'">Arial</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#563d7c;" title="#563d7c">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#868e96;" title="#868e96">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#28a745;" title="#28a745">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#dc3545;" title="#dc3545">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#17a2b8;" title="#17a2b8">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#ffc107;" title="#ffc107">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#f8f9fa;" title="#f8f9fa">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#343434;" title="#343434">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-right">
                    <a href="./monotony"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_monotony.png" alt="Screenshot Monotony"></a>
                </div>
                <div class="col-md-7 py-2 order-md-first text-md-right">
                    <h2 class="my-1"><a href="./monotony">Monotony</a></h2>
                    <p>
                        You become resigned to the monotony of one color.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Open Sans'">Open Sans</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#222222;" title="#222222">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#666666;" title="#666666">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#333333;" title="#333333">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#434343;" title="#434343">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#515151;" title="#515151">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#5f5f5f;" title="#5f5f5f">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eceeec;" title="#eceeec">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#111111;" title="#111111">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-left">
                    <a href="./poypull"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_poypull.png" alt="Screenshot Poypull"></a>
                </div>
                <div class="col-md-7 py-2 ">
                    <h2 class="my-1"><a href="./poypull">Poypull</a></h2>
                    <p>
                        A bold, bright purple colored theme.<br>
                        
                    </p>
                    <p><span class="h5" style="font-family:'Muli'">Muli</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#7F0FFF;" title="#7F0FFF">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#bed6d5;" title="#bed6d5">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#420084;" title="#420084">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#f2460d;" title="#f2460d">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#7ebcfa;" title="#7ebcfa">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#ff9933;" title="#ff9933">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eef0f2;" title="#eef0f2">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#000633;" title="#000633">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5 border-bottom">
                <div class="col-md-5 py-2 text-center text-md-right">
                    <a href="./tequila"><img class="img-fluid rounded shadow wow fadeIn" src="./assets/ss_tequila.png" alt="Screenshot Tequila"></a>
                </div>
                <div class="col-md-7 py-2 order-md-first text-md-right">
                    <h2 class="my-1"><a href="./tequila">Tequila</a></h2>
                    <p>
                        Hungover on the beach at sunrise.<br>
                        Also includes high-res image from Unsplash.
                    </p>
                    <p><span class="h5" style="font-family:'Voltaire'">Voltaire</span> is the font family.</p>
                    <small class="text-muted">Color palette</small>
                    <h5>
                        
                        <span class="badge badge-pill" style="background-color:#2F414A;" title="#2F414A">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#F47B53;" title="#F47B53">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#420084;" title="#420084">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#f2460d;" title="#f2460d">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#7ebcfa;" title="#7ebcfa">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#ff9933;" title="#ff9933">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#eef0f2;" title="#eef0f2">&nbsp;</span>
                        
                        <span class="badge badge-pill" style="background-color:#000633;" title="#000633">&nbsp;</span>
                        
                    </h5>
                </div>
            </div>
            
            <div class="row py-5">
                <div class="col-12 col-sm-10 mx-auto text-center">
                    <h4>
                    Want more themes like these?
                    </h4>
                    <p class="lead mb-3">It's easy to customize and build your own Bootstrap 4 themes
                        at <a href="https://themestr.app">Themestr.app</a>.</p>
                    <a class="github-button" href="https://github.com/themesguide" data-size="large" aria-label="Follow @themesguide on GitHub">Follow</a>
                    <a class="github-button" href="https://github.com/themesguide/bootstrap-themes/" data-icon="octicon-star" data-size="large" aria-label="Star themesguide/bootstrap-themes on GitHub">Star</a>
                </div>
            </div>
        </div>
    </section>
        <footer id="footer" class="bg-dark text-white">
        <div class="container pt-3">
            <div class="row">
                <div class="col-6 col-md-6 col-lg-3 column">
                    <h6>Information</h6>
                    <ul class="list-unstyled">
                        <li><a href="http://themes.guide/#freebies">Free Themes</a>
                        </li>
                        <li><a href="http://themes.guide/#themes">Pro Themes</a>
                        </li>
                        <li><a href="http://themes.guide/#about">Benefits</a>
                        </li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 column text-lg-left text-right">
                    <h6>Tools</h6>
                    <ul class="list-unstyled">
                        <li><a href="https://themestr.app" title="Custom Bootstrap theme creator - SASS to CSS">Themestr.app</a>
                        </li>
                        <li><a href="http://bootstrap4.guide" title="Learn about Bootstrap 4">Bootstrap4.guide</a>
                        </li>
                        <li><a href="http://www.codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a>
                        </li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 column">
                    <h6></h6>
                </div>
                <div class="col-6 col-lg-3 column text-right">
                    <h6>Follow</h6>
                    <ul class="nav float-right">
                        <li><a class="nav-link px-1" href="//twitter.com/ThemesGuide" title="@ThemesGuide"><i class="fa fa-3x ion-logo-twitter"></i></a></li>
                        <li><a class="nav-link px-1" href="https://github.com/ThemesGuide/bootstrap-themes" title="Star on GitHub"><i class="fa fa-3x ion-ios-star-outline"></i></a></li>
                        <li><a class="nav-link pl-1 pr-0" href="https://github.com/ThemesGuide" title="Follow on GitHub"><i class="fa fa-3x ion-logo-github"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container pt-5">
            <p class="small text-right">Made with ♥ by <a class="text-white" href="http://themes.guide">Themes.guide</a> ©2018</p>
        </div>
    </footer> 
    <!--scripts loaded here-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>